<template>
	<z-paging>
		<template #top>
			<view :style="{height:api.navbarHeight+'px'}"
				style="position: relative;z-index: 999;">
				<view class="flex align-center justify-between" style="position: absolute;width: calc(100% - 40rpx);"
					:style="{left:20 + 'rpx',bottom:0 +'px'}">
					<view>
			
					</view>
					<view
						class="flex-1 flex align-center justify-center text-lg text-bold text-white padding-bottom-sm ">
						哈普抽奖红包
					</view>
				</view>
			</view>
		</template>
		<view class="w-full  bg-content padding-top-xl"
			:style="{height:`calc(100vh - ${api.navbarHeight}px)`}">
			<view class="red-packet-box margin-top-xl flex flex-direction align-center justify-around" @click="$api.toPage('/sub-packet/pages/packet-detail/packet-detail')">
				<view class="margin-top">
					<view class="text-color text-title text-bold text-center">
						哈普抽奖红包
					</view>
					<view class="text-df text-color text-center margin-top-lg">
						手气前10名赠送门店精美车载一个
					</view>
				</view>
				<image src="https://env-00jxt1fzew48.normal.cloudstatic.cn/red-packet/play.png"  class="play-box" mode="aspectFit"></image>
				<image src="https://env-00jxt1fzew48.normal.cloudstatic.cn/red-packet/red-packet-2.png" class="bottom-box" mode="aspectFit"></image>
			</view>
		</view>
	</z-paging>
</template>

<script>
	export default {
		computed: {
			api() {
				return this.$api
			}
		}
	}
</script>

<style scoped lang="scss">
	.red-packet-box {
		height: 80%;
		background-image:url(https://env-00jxt1fzew48.normal.cloudstatic.cn/red-packet/red-packet.png);
		background-size: 100% 100%;
	}

	.w-full {
		width: 100%;
		height: 100%;
	}

	.bg-content {
		background-image: url(https://env-00jxt1fzew48.normal.cloudstatic.cn/red-packet/red_packet_bg.png);
		background-size: 100% 100%;
	}
	.play-box{
		width: 64rpx;
		height: 104rpx;
	}
	.bottom-box{
		width: 466rpx;
		height: 466rpx;
	}
	.text-color{
		color: #FFEED2;
	}
	.text-title{
		font-size: 46rpx;
	}
</style>